<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="./lib/vue.js" type="text/javascript" charset="utf-8"></script>
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <hello-com v-if="isShow"></hello-com>
            <hello-com v-show="isShow"></hello-com>
        </div>
    </body>
    <script>
        let helloCom = Vue.component("hello-com", {
            template:'<div><h1>{{ laochen }}</h1><button @click="clickData">点击修改</button></div>',
            data:function(){
                return {
                    laochen:"hello laochen"
                }
            },
            methods: {
                clickData:function(){
                    this.laochen = "hello 小明"
                }  
            },
            // 创建之前
            beforeCreate () {
                console.log("beforeCreate");
                //此时数据data和事件方法methods还未绑定到vm对象上
            },
            created () {
                console.log("create");
                // 此时数据data和方法methods绑定到应用对象vm上
            },
            // 渲染之前(挂载之前)
            beforeMount () {
                console.log("beforeMount");
                // 渲染之前,根据数据生成的DOM对象是获取不到的
            },
            // 渲染之后
            mounted () {
                console.log("mounted");
                // 渲染之后,可以获取数据生成的dom对象
            },
            // 更新之前
            beforeUpdate () {
                // 数据更改,但内容未更改之前
                console.log("beforeUpdate");
            },
            // 更新后
            updated () {
                // 内容已更新完毕
                console.log("update");
            },
            // 应用销毁之前
            beforeDestroy () {
                console.log("beforeDestroy");
            },
            // 应用销毁之后
            destroyed () {
                console.log("destroyed");
            }
        })
        
        let app = new Vue({
            el:"#app",
            data:{
                isShow:true
            }
            // 注册组件
            /* components: {
                "hello-com":helloCom
            } */
        })
        
        
    </script>
</html>